<template>
  <div class="container">
    <div class="head-container item">
      <div class="title">通知管理</div>
      <el-button-group class="checkout-btn-group">
        <el-button class="checkout-btn" @click="openAddDialog">
          <i class="el-icon-plus"></i>
          <span>新建通知</span>
        </el-button>
        <el-button class="checkout-btn" @click="queryTableData">
          <i class="el-icon-refresh"></i>
          <span>刷新</span>
        </el-button>
      </el-button-group>

    </div>
    <div class="table-container item">
      <el-table
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="通知编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="tittle"
            label="标题"
            width="200">
        </el-table-column>
        <el-table-column
            prop="content"
            label="内容"
            width="300">
        </el-table-column>
        <el-table-column
            prop="notificationTime"
            label="通知时间"
            width="250">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click.native.prevent="viewMessage(scope.row)"
                       style="margin-right: 5px">
              详情
            </el-button>
            <el-popconfirm
                title="确定删除吗？"
                @confirm="deleteNotification(scope.row)">
              <el-button slot="reference" type="danger" size="mini">
                删除
              </el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageSize"
          :page-sizes="[5,10,15]"
          :current-page.sync="pageNum"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog
        title="添加通知"
        :visible.sync="addDialogVisible"
        width="30%"
        :before-close="handleClose">
      <div style="font-size: 18px;margin-top: 5px;margin-bottom: 5px">通知标题</div>
      <el-input v-model="tittle" show-word-limit minlength="2" maxlength="20"></el-input>
      <div style="font-size: 18px;margin-top: 5px;margin-bottom: 5px">通知内容</div>
      <el-input type="textarea" show-word-limit maxlength="200" :autosize="{minRows:3,maxRows:5}"
                v-model="content"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="addNotification">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="通知信息"
        :visible.sync="messageDialogVisible"
        :before-close="confirmMsg"
        width="53%">
      <div class="dialog-content">
        <div class="treatment-message content-container">
          <div class="dialog-base-title treatment-message-tittle">通知信息</div>
          <el-button class="treatment-message-button" @click="updateNotificationMsg">
            {{ treatmentMessageReadOnly ? "修改" : "取消" }}
          </el-button>
          <el-button class="treatment-message-submit treatment-message-button" v-if="!treatmentMessageReadOnly"
                     @click="updateNotification">提交
          </el-button>
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template slot="label">
                通知编号
              </template>
              {{ selectNotification.id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                通知时间
              </template>
              {{ selectNotification.notificationTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                标题
              </template>
              <el-input :readonly="treatmentMessageReadOnly" show-word-limit maxlength="20"
                        v-model="selectNotification.tittle"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                内容
              </template>
              <el-input type="textarea" show-word-limit maxlength="200" :autosize="{minRows:3,maxRows:5}"
                        :readonly="treatmentMessageReadOnly" v-model="selectNotification.content"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="confirmMsg">返 回</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
import {addNotification, deleteNotification, queryNotification, updateNotification} from "@/api/notification";
import {formatDate} from "@/utils/date";

export default {
  name: "NotificationManagementPage",
  data() {
    return {
      key: "",
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 0,
      addDialogVisible: false,
      tittle: "",
      content: "",
      messageDialogVisible: false,
      treatmentMessageReadOnly: true,
      selectNotification: {
        id: "",
        tittle: "",
        content: "",
        notificationTime: ""
      },
      preTittle: "",
      preContent: ""
    }
  },
  methods: {
    confirmMsg() {
      this.messageDialogVisible = false;
    },
    updateNotificationMsg() {
      this.treatmentMessageReadOnly = !this.treatmentMessageReadOnly;
      if (this.treatmentMessageReadOnly) {
        this.selectNotification.tittle = this.preTittle;
        this.selectNotification.content = this.preContent;
      } else {
        this.preTittle = this.selectNotification.tittle;
        this.preContent = this.selectNotification.content;
      }
    },
    updateNotification() {
      updateNotification(this.selectNotification.id, this.selectNotification.tittle, this.selectNotification.content).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功");
          this.messageDialogVisible = false;
          this.queryTableData();
        } else {
          this.$message.error("修改失败");
        }
      })
    },
    addNotification() {

      addNotification(this.tittle, this.content).then(res => {
        if (res.code === 200) {
          this.$message.success("添加成功");
          this.tittle = "";
          this.content = "";
          this.addDialogVisible = false;
          this.queryTableData();
        }
      })


    },
    openAddDialog() {
      this.addDialogVisible = true;
    },
    handleClose() {
      this.tittle = "";
      this.content = "";
      this.addDialogVisible = false;
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.queryTableData();
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.queryTableData();
    },
    queryTableData() {
      queryNotification(this.pageNum, this.pageSize).then(res => {
        console.log(res)
        res.data.list.forEach(i => {
          i.notificationTime = formatDate(new Date(i.notificationTime), "yyyy-MM-dd")
        })
        this.tableData = res.data.list;
        this.pageSize = res.data.pageSize;
        this.pageNum = res.data.pageNum;
        this.total = res.data.total;
      })
    },
    viewMessage(row) {
      this.selectNotification = row;
      this.messageDialogVisible = true;
    },
    deleteNotification(row) {
      deleteNotification(row.id).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.queryTableData();
        }
      })
    },
  },
  mounted() {
    this.queryTableData();
  }
}
</script>

<style scoped>
.container {
  border-top: 3px solid #3c8dbc;
  border-radius: 3px;
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
}

.item {
  margin-right: 10px;
  margin-left: 10px;
}

.table-container {
  text-align: center;
}

.checkout-btn-group {

}

.checkout-btn {
  margin-top: 10px;
  margin-bottom: 10px;
}

.title {
  font-size: 20px;
  padding-top: 10px;
}

.pagination {
  padding-top: 20px;
  padding-bottom: 20px;
}

.search-container {
  display: inline-block;
  float: right;
}

.query-input {
  display: inline-block;
  margin-right: 10px;
  width: 180px;
}

.dialog-base-title {
  font-size: 15px;
  padding: 5px;
  display: inline-block;
}

.dialog-base-table {
  width: 100%;
}

.content-container {
  margin-top: 20px;
  background-color: #E9EEF3;
}


.treatment-message-button {
  height: 24px;
  align-items: center;
  padding: 3px 15px;
  margin-left: 20px;
  color: #E9EEF3;
  background-color: #3d9970;
  border-color: #3d9970;
}

.treatment-message-submit {
  background-color: #409EFF;
  border-color: #409EFF;
}
</style>
